<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>进销存系统</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
  <style type="text/css">
  ul.layui-tab-title li:first-child i{
  	display: none;
  }
  
  	div.layui-tab-content div.layui-tab-item{
  		height: 100%;
  	}
  	
#a {
	position: absolute;
	top: 350px;
	left: 600px;
}

#b {
	position: absolute;
	top: 370px;
	left: 990px;
}

#d {
	position: absolute;
	top: 350px;
	left: 802px;
}

#c {
	position: absolute;
	top: 458px;
	left: 795px;
}

#e {
	position: absolute;
	top: 420px;
	left: 730px;
}
#a img:hover {
	 transform:scale(1.2);
}
#b img:hover {
	 transform:scale(1.2);
}
#c img:hover {
	 transform:scale(1.2);
}
#d img:hover {
	 transform:scale(1.2);
}
</style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">进销存后台管理</div>
    <!-- 头部区域 -->
    
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域 -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="site-demo-active" href="javascript:;" data-type="tabAdd" data-id="index" data-url="" data-title="首页">首页</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;" class="site-demo-active" data-type="tabAdd" data-id="usermanager" data-url="${ctx}/user" data-title="用户管理">用户管理</a>
        </li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body" style="top: 50px;overflow-y: hidden;">
    <!-- 内容主体区域 -->
    <div style="padding-top: -15px; height: 100%">
		<div class="layui-tab" style="height: 100%" lay-filter="demo" lay-allowclose="true">
		  <ul class="layui-tab-title">
		    <li class="layui-this" lay-id="index">首页</li>
		  </ul>
		  <div class="layui-tab-content"  style="height: 100%">
		    <div class="layui-tab-item layui-show">
		    	<div id="a"  >
					<a href="#" class=" site-demo-active" data-type="tabAdd" data-id="supplier" data-url="supplier" data-title="供应商">
						<img src="./layui/images/face/41.gif" title="供应商">
					</a>
				</div>
				<div id="b" >
					<a href="#" class=" site-demo-active" data-type="tabAdd" data-id="stock" data-url="stock" data-title="库存查询">
						<img src="./layui/images/face/47.gif" title="库存查询">
					</a>
				</div>
				<div id="c">
					<a href="#" class=" site-demo-active" data-type="tabAdd" data-id="stockout" data-url="stockout" data-title="采购退货">
						<img src="./layui/images/face/46.gif" title="采购退货">
					</a>
				</div>
				<div id="d">
					<a href="#" class=" site-demo-active" data-type="tabAdd" data-id="stockin" data-url="stockin" data-title="采购入库">
						<img src="./layui/images/face/45.gif" title="采购入库">
					</a>
				</div>
				<div id="e">
					<img src="./layui/images/face/56.gif">
				</div>
		    </div>
		  </div>
		</div>
	</div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
  </div>
</div>
<script src="./layui/layui.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
  var $ = layui.jquery,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
  
//触发事件
  var active = {
      //在这里给active绑定几项事件，后面可通过active调用这些事件
      tabAdd: function(url,id,title) {
          //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
          //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
          element.tabAdd('demo', {
              title: title,
              content: '<iframe data-frameid="'+id+'" scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:99%;"></iframe>',
              id: id //规定好的id
          })
      },
      tabChange: function(id) {
          //切换到指定Tab项
          element.tabChange('demo', id); //根据传入的id传入到指定的tab项
      }, 
      tabDelete: function (id) {
      element.tabDelete("demo", id);//删除
      }
  };


  //当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
  $('.site-demo-active').on('click', function() {
      var dataid = $(this);

      //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
      if ($(".layui-tab-title li[lay-id]").length <= 0) {
          //如果比零小，则直接打开新的tab项
          active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
      } else {
          //否则判断该tab项是否以及存在

          var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
          $.each($(".layui-tab-title li[lay-id]"), function () {
              //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
              if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                  isData = true;
              }
          })
          if (isData == false) {
              //标志为false 新增一个tab项
              active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
          }
      }
      //最后不管是否新增tab，最后都转到要打开的选项页面上
      active.tabChange(dataid.attr("data-id"));
  });

});
</script>
</body>
</html>